<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
  <link rel="stylesheet" href="./首页.css">
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black" id="boy"><img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.jf5fAnMXNNCBn9bZmcmonQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          alt="">
        <br>666
      </div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <!-- <ul class="layui-nav layui-layout-left">
       移动端显示 -->
      <!-- <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
      <li class="layui-nav-item"> 
        <a href="javascript:;">nav groups</a>
      <dl class="layui-nav-child">
          <dd><a href="javascript:;">menu 11</a></dd> 
          <dd><a href="javascript:;">menu 22</a></dd> 
          <dd><a href="javascript:;">menu 33</a></dd>
        </dl>
      </li>  -->
      <!-- </ul>  -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
          <a href="javascript:;">
            <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
            个人中心
          </a>
          <!-- <dl class="layui-nav-child">
          <dd><a href="javascript:;">Your Profile</a></dd>
          <dd><a href="javascript:;">Settings</a></dd>
          <dd><a href="javascript:;">Sign out</a></dd>
        </dl> -->
        </li>
        <li class="layui-nav-item layui-hide layui-show-sm-inline-block tui">
          <a href="javascript:;">
            <!-- <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img"> -->
            退出
          </a>

        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree ull" lay-filter="test">
          <li class="layui-nav-item tab"><a href="javascript:;">仪表盘</a></li>
          <!-- <li class="layui-nav-item"><a href="javascript:;">分类管理</a></li> -->
          <li class="layui-nav-item tab"><a href="javascript:;">讲师管理</a></li>
          <!-- <li class="layui-nav-item"><a href="javascript:;">课程管理</a></li> -->
        </ul>
      </div>
    </div>
    <div class="layui-body">
      <!-- 内容主体区域 -->
      <!-- 轮播图 -->
      <div class="hide">
        <blockquote class="layui-elem-quote layui-text">
          <blockquote class="layui-elem-quote layui-text">
            <img src="./微信截图_20250303143924.png" alt="">
            <!-- Layui 框体布局内容主体区域 -->
          </blockquote>
          <div class="layui-card layui-panel">
            <div class="layui-card-header">
              <!-- 下面是充数内容，为的是出现滚动条 -->
              <div class="jiang">
                <span>讲师管理</span> / 仪表盘
              </div>
            </div>
            <div class="layui-card-body">
              <div class="tu">

                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width: 600px;height:400px;"></div>
                <div id="main1" style="width: 600px;height:400px;"></div>

              </div>
              <!-- <div class="tj">
              姓名 <input type="text" class="inps" placeholder="姓名"><br><br>
               昵称<input type="text" class="inps" placeholder=" 昵称"><br><br>
              性别：<input type="text" class="inps"placeholder=" 性别（0：男，1：女）"><br><br>
               生日<input type="text" class="inps" placeholder="2000-6-6"><br><br>
               手机号码<input type="text" class="inps" placeholder="手机号码"><br><br>
               <input type="text" class="inps" placeholder="姓名"><br><br> -->
              <!-- <button onclick="tian()" class="naniu">添加讲师</button> -->
              <!-- </div> -->
              <!-- Layui 框体布局内容主体区域 -->
        </blockquote>
      </div>
      <!-- 主页渲染 -->
      <div class="hide">
        <div style="padding: 15px;">
          <blockquote class="layui-elem-quote layui-text">
            <img src="./微信截图_20250303143924.png" alt="">
            <!-- Layui 框体布局内容主体区域 -->
          </blockquote>
          <div class="layui-card layui-panel">
            <div class="layui-card-header">
              <!-- 下面是充数内容，为的是出现滚动条 -->
              <div class="jiang">
                <span>讲师管理</span> / 讲师列表
              </div>
            </div>
            <div class="layui-card-header">
              <!-- 下面是充数内容，为的是出现滚动条 -->
              <button class="naniu tab sss">添加讲师</button>
            </div>
            <div class="layui-card-body sss">
              <input type="text" class="suo inps" placeholder="姓名"><button class="sou naniu">搜索</button>
              <table class="boy1" border="1px">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>昵称</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>手机号码</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody class="boy2">

                </tbody>
              </table>
              <div id="demo-laypage-normal-2"></div>
              <!--  讲师信息-->
              <div class="xiang">
                <h1>讲师信息</h1>
                <table class="boy9" border="1px">
                </table>
                <button class="naniu but11">返回首页</button>
               </div>
            </div>
          </div>
          <br><br>
        </div>
      </div>
      <!-- 添加 -->
      <div class="hide">
        <blockquote class="layui-elem-quote layui-text">
          <img src="./微信截图_20250303143924.png" alt="">
          <!-- Layui 框体布局内容主体区域 -->
        </blockquote>
        <div class="layui-card layui-panel">
          <div class="layui-card-header">
            <!-- 下面是充数内容，为的是出现滚动条 -->
            <div class="jiang">
              <span>讲师管理</span> / 讲师添加
            </div>
          </div>
          <div class="layui-card-body">
            <div class="tj">
              姓名 <input type="text" class="inps" placeholder="姓名"><br><br>
              昵称<input type="text" class="inps" placeholder=" 昵称"><br><br>
              性别：<input type="text" class="inps" placeholder=" 性别（0：男，1：女）"><br><br>
              生日<input type="text" class="inps" placeholder="2000-6-6"><br><br>
              手机号码<input type="text" class="inps" placeholder="手机号码"><br><br>
              <!-- <input type="text" class="inps" placeholder="姓名"><br><br> -->
              <button onclick="tian()" class="naniu">添加讲师</button>
            </div>
          </div>
          <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
          </div>
        </div>
      </div>
      <!-- 修改 -->
      <div class="xiugai">
        姓名 <input type="text" placeholder="姓名"><br><br>
        出生日期 <input type="text" placeholder="2000-1-1"><br><br>
        性别 <input type="text" placeholder=" 性别（0：男，1：女）"><br><br>
        <button class="bian">编辑</button>
      </div>
      <!-- 详细 -->
      <script src="//unpkg.com/layui@2.9.23/dist/layui.js"></script>
      <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
          var element = layui.element;
          var layer = layui.layer;
          var util = layui.util;
          var $ = layui.$;

          //头部事件
          util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
              layer.msg('展开左侧菜单的操作', { icon: 0 });
            },
            menuRight: function () {  // 右侧菜单事件
              layer.open({
                type: 1,
                title: '更多',
                content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                area: ['260px', '100%'],
                offset: 'rt', // 右上角
                anim: 'slideLeft', // 从右侧抽屉滑出
                shadeClose: true,
                scrollbar: false
              });
            }
          });
        });
        layui.use(function () {
          var laypage = layui.laypage;
          // 普通用法
          // laypage.render({
          //   elem: 'demo-laypage-normal-1',
          //   count: 50 // 数据总数
          // });
          laypage.render({
            elem: 'demo-laypage-normal-2',
            count: 50// 数据总数
          });
        });
      </script>
      <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
      <script src="./首页.js">

      </script>
      <!-- <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      </script> -->
</body>

</html>